<template>
  <el-dialog
    :visible.sync="visible"
    title="创建组合"
    :close-on-click-modal="false"
    @close="colseDialog()"
  >
    <el-form
      ref="dataForm"
      :rules="rules"
      :model="dataForm"
      label-position="right"
      label-width="80px"
      style="width: 500px; margin-left: 50px"
    >
      <el-form-item label="组合名称" prop="compositionName">
        <el-input v-model="dataForm.compositionName" />
      </el-form-item>
      <el-form-item label="投资规模" prop="initMoney">
        <el-input-number
          v-model="dataForm.initMoney"
          placeholder="请输入投资规模"
          :controls="false"
          :precision="2"
          style="width: 160px"
        ></el-input-number>
        万元
      </el-form-item>
      <el-form-item label="对标指数" prop="indexType">
        <indexSelectTree
          :multiple="false"
          :width="420"
          :indexType.sync="dataForm.indexType"
        ></indexSelectTree>
      </el-form-item>
      <el-form-item label="备注" prop="mark">
        <el-input
          type="textarea"
          :rows="3"
          placeholder="最多120个字符"
          v-model="dataForm.mark"
          maxlength="120"
          size="mini"
          show-word-limit
          style="width: 600px"
        ></el-input>
      </el-form-item>
    </el-form>
    <div slot="footer" class="dialog-footer">
      <el-button @click="visible = false">取消</el-button>
      <el-button type="primary" @click="addSubmit">提交</el-button>
    </div>
  </el-dialog>
</template>

<script>
import indexSelectTree from "@/components/investComn/indexSelectTree.vue";
import { addOrUpdateStrategyComposition } from "@/api/combManage";
import { mapGetters } from "vuex";

export default {
  props: {
    addOrUpdateOpenVisible: {
      type: Boolean
    }
  },
  components: { indexSelectTree },
  data() {
    return {
      visible: false,
      dataForm: {
        compositionId: "",
        compositionName: "",
        indexType: "",
        mark: ""
      },
      rules: {
        compositionName: [
          { required: true, message: "分组组合必填", trigger: "change" }
        ],
        initMoney: [
          { required: true, message: "投资规模必填", trigger: "blur" }
        ],
        indexType: [
          { required: true, message: "对标指数必填", trigger: "change" }
        ]
      }
    };
  },
  computed: {
    ...mapGetters(["userId"])
  },
  watch: {
    addOrUpdateOpenVisible: {
      handler(val) {
        this.visible = val;
        if (val) {
          this.$nextTick(() => {
            this.$refs["dataForm"].resetFields();
          });
        }
      },
      deep: true
    }
  },
  methods: {
    init(row) {
      this.visible = true;
      this.$nextTick(() => {
        this.$refs["dataForm"].resetFields();
        this.dataForm = {
          compositionId: "",
          compositionName: "",
          indexType: "",
          mark: ""
        };
        if (row) {
          this.dataForm = Object.assign({}, row);
        }
      });
    },
    addSubmit() {
      this.$refs["dataForm"].validate((valid) => {
        if (valid) {
          addOrUpdateStrategyComposition({
            ...this.dataForm,
            userId: this.userId
          }).then((res) => {
            if (res.code == 0) {
              this.$notify({
                message: res.body,
                type: "success",
                duration: 2000
              });
              this.$emit("update:addOrUpdateOpenVisible", false);
              this.$router.push({
                path: "StrategyComb",
                query: {
                  typePage: "add"
                }
              });
            }
          });
        }
      });
    },
    colseDialog() {
      this.$emit("update:addOrUpdateOpenVisible", false);
    }
  }
};
</script>

<style lang="scss" scoped></style>
